<template>
	<view class="container">
		<uDetail :detailList="detailList"></uDetail>
		<form @reset="formReset">
			<uform v-model="form" ref="uform" :config="config" :rules="rules" :showBorder="showBorder" label-position="left">
				<template #casePosDesc>
					<uni-easyinput suffixIcon="location-filled" v-model="form.casePosDesc" placeholder="点击选择具体位置"  @iconClick="posClick"></uni-easyinput>
				</template>
			</uform>
			<view class="uni-btn-v" style="display: flex;padding:20px;">
				<button type="primary" @click="formSubmitBefore(1)">提交</button>
				<button type="default" form-type="reset">重置</button>
			</view>
		</form>
	</view>
</template>

<script>
	import uform from '@/components/uni-uform/uni-uform.vue';
	import uDetail from '@/components/uni-uform/uni-detail.vue';
	import { addPubConserveRecords } from "@/api/pub/pubConserveRecords";
	import {uuid} from "@/plugins/package/utils";
	import { listOrg } from "@/api/system/org";
	import { getToken } from '@/utils/auth';
	import  configs from '@/config'
	export default {
		components: {
			uform,uDetail
		},
		data(){
			
			return {
				imagesList: [],
				form:{

				},
				selectForm:{},
				detailList:[],
				config:[{
					name: 'conserveSchedule',
					label: '养护进度',
					component: 'uni-easyinput',
					required:true,
					extra:{
						placeholder: "请填写养护进度",
					}
				},{
					name: 'conserveInstructions',
					label: '养护说明',
					component: 'uni-easyinput',
					required:true,
					extra:{
						type: "textarea",
						placeholder: "请填写养护说明",
					}
				},{
					name: 'images',
					label: '附件',
					component: 'uni-file-picker',
					extra: {
						"auto-upload":false,
						ref:"files",
						limit:3,
						title:"最多选择3张图片",
						fileMediatype:"image"
					},
					event:{
						success:(e)=>{
							console.log(e);
						},
						select:(e)=>{
							for (let i = 0; i < e.tempFilePaths.length; i++) {
								this.filePaths.push({"uri":e.tempFilePaths[i]});
							}
						},
						delete:(e)=>{
							for (let i = 0; i < this.filePaths.length; i++) {
								if (this.filePaths[i].uri == e.tempFilePath) {
									this.filePaths.splice(i, 1);
								}
							}
						},
					}
				}],
				showBorder:true,
				rules:{
					
					
					conserveSchedule:{
						rules:[
							{required: true, errorMessage: "请输入养护进度"},
							{
								validateFunction:(rule,value,data,callback)=>{
									if (this.selectForm.conserveSchedule >value) {
										callback('填报进度小于或者等于已有进度')
									}
									return true
								}
							}
						],
					},
					conserveInstructions:{
						rules:[
							{required: true, errorMessage: "请填写养护描述"}
						],
					}					
				},
				filePaths:[],
			}
		},
		
		mounted(){
			
		},
		onLoad(e) {
			console.log(e.rowData);
			let data = JSON.parse(e.rowData);
			this.selectForm = data;
			this.detailList.push({"label":"计划名称:","value":data.name});
			this.detailList.push({"label":"养护单位:","value":data.conserveOrgName});
			this.detailList.push({"label":"开始时间:","value":data.conserveStartTime});
			this.detailList.push({"label":"结束时间:","value":data.conserveEndTime});
			this.detailList.push({"label":"养护要求:","value":data.conserveDemand});
			this.detailList.push({"label":"养护范围:","value":data.conserveRange});
		},
		methods:{
			getItem(name) {
				return {
					item: this.config.find(res => res.name === name),
					index: this.config.findIndex(res => res.name === name)
				}
			},
			posClick(){
				let _this = this;
				//跳转位置选择页面
				uni.navigateTo({
					url:"../../common/webview/index?aurl="+encodeURI("pages/position"),
					events:{
						//监听选点事件，得到坐标 详细地址
						acceptDataFromOpenedPage:function(data){
							_this.form.casePosDesc = data.coordinate.address;
							_this.form.lnglat = data.coordinate.lon+","+data.coordinate.lat;
						}
					}
				})
			},
			fileUpload(){
				return new Promise((resolve,reject) => {
					uni.uploadFile({
						url: configs.baseUrl+'/am/amAttach/uploadFiles', 
						files: this.filePaths,
						name: 'files',
						header:{
							"Authorization": "Bearer " + getToken() 
						},
						formData: {
							
						},
						success: (res) => {debugger
							if(res.statusCode==200){
								var data = JSON.parse(res.data);
								this.imagesList = data.data;
								resolve();
							}else{
								uni.showToast({
									duration: 3000,
									icon: "error",
									title:res.msg
								});
							}
						},
						fail() {
						}
					});
				})
			},
			formSubmitBefore: function(type) {

			    //定义表单规则
				let form = this.$refs.uform.getForm();
				
				form.validate().then(res => {
					console.log('表单数据信息：', res);	
					//验证输入的进度是否超过计划的进度
					// if (this.selectForm.conserveSchedule >this.form.conserveSchedule) {
					//   uni.showToast({
					//   	duration: 3000,
					//   	icon: "none",
					//   	title:"填报进度小于或者等于已有进度"
					//   });
					//   return;
					// }
					console.log(this.filePaths.length);
					if(this.filePaths.length>0){
						this.fileUpload().then(res=>{
							let images = this.imagesList;
							images.map((item) => {
								  item.bussType = "td_pub_conserve_records";
								  item.fileUrl = item.fileid;
								  item.attachId = item.fileid;
								  item.fileName = item.name;
							  });
							this.form.imagesList = images;
							this.formSubmit();
						});
					}else{
						this.formSubmit();
					}
					console.log('表单数据信息：', this.form);
				}).catch(err => {
					console.log('表单错误信息：', err);
				})
			},
			formReset: function(e) {
				console.log('清空数据')
				this.form={}
			},
			formSubmit:function(){
				this.form.planId = this.selectForm.id;
				addPubConserveRecords(this.form).then(res=>{
					console.log(res);
					if(res.code==200){
						uni.showModal({
							title: '提示', // 标题
							content: '上报成功', // 提示内容
							showCancel: false, 
							success(res) {
								uni.navigateBack(0)
							}
						});					
					}else{
						uni.showToast({
							duration: 3000,
							icon: "error",
							title:res.msg
						});
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.uni-form-item{
		display: flex;
		align-items: center;
		padding: 10px 15px;
		border-bottom: 1px solid #eee;
	}
	.uni-form-item .title{
		width:30%;
	}
	.uni-form-item .content{
		width:70%;
	}
</style>